<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="demo" class="one" title="hello" name="box" data-txt="这是一个div" asd="zxc"></div>
</body>
<script>


    var box = document.getElementsByClassName("one")[0];
    console.log(box);



    // box.setAttribute(key,val);
    // box.getAttribute(key);
    // box.removeAttribute(key);

    // 可以用于 设置 获取 删除  自定义属性


    // 自定义属性  =>  H5允许用户按照自己的需求自定义属性(可以在标签内存储一些数据)
    // 1.  H5官方规定自定义属性以data-开头  示例:data-属性名="属性值"
    // 2.  属性名不以data-开头  随意定义  asd="zxc";


    console.log(box.getAttribute("data-txt"));
    console.log(box.getAttribute("asd"));

    box.setAttribute("data-txt", "This is a div");
    box.setAttribute("asd", "ZXC");

    box.removeAttribute("data-txt");
    box.removeAttribute("asd");


</script>

</html>